<template>
  <div class="box3">
    <div style="margin-left: 80px">
      <div style="display: flex;margin-top: 20px">
        <div v-for="(item,index) in areaType" :key="item" class="type1 point"  @click="area=item.area;searchMVList(type,area,order);clickItem(index);" :class="addbkColor(index)">{{item.area}}</div>
      </div>
      <div style="display: flex;margin-top: 20px">
        <div v-for="(item,index) in MVType" :key="item" class="type2 point" @click="type=item.type;searchMVList(type,area,order);clickItem2(index)" :class="addbkColor2(index)">{{item.type}}</div>
      </div>

      <p style="margin-top: 30px;" id="p1">
        <a>全部视频</a>
        <a  style="float: right;margin-right: 120px"  @click="order='最热';searchMVList(type,area,order);clickItem3(1)" :class="addbkColor3(1)">最热</a>
        <a  style="float: right;margin-right: 10px"  @click="order='最新';searchMVList(type,area,order);clickItem3(2)" :class="addbkColor3(2)">最新</a>
      </p>
      <div class="MVBox">
        <div v-for="item in MVList" :key="item" class="MVList">
          <img :src="item.cover" class="img" @click="playMV(item.id)">
          <play-circle-filled  class="i" @click="playMV(item.id)"/>
          <p style="font-size: 15px">{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref} from "vue";
import axios from "axios";
import {useMVStore} from "@/Store/Pinia/pinia";
const mvstore=useMVStore();
import { useRouter } from "vue-router";
import {baseURL} from "@/request/index.js";
const router=useRouter();
const MVList=ref([]);
const area=ref("全部");
const type=ref("全部");
const order=ref("最热");
const currentIndex=ref(0);
const currentIndex2=ref(0);
const currentIndex3=ref(2);
const bkcolor=ref(true)
const mvurl=ref("");

const MVType=reactive([
  {type:"全部"},
  {type:"官方版"},
  {type:"原生"},
  {type:"现场版"},
  {type:"网易"}
]);
const areaType=reactive([
  {area:"全部"},
  {area:"内地"},
  {area:"港台"},
  {area:"欧美"},
  {area:"日本"},
  {area:"韩国"}
]);

const getMVList= () => { //获取歌手列表
  axios.post(baseURL+"/mv/all?area=全部&order=最新&type=全部&limit=100").then((res) => {
    // console.log(res);
    MVList.value=res.data.data;
  })
}
getMVList();
function searchMVList(type,area,order){ //匹配视频
  axios.post(baseURL+"/mv/all?area="+area+"&type="+type+"&order="+order).then((res) => {
    // console.log(res);
    MVList.value=res.data.data;
  })
}

function clickItem(index) {
  currentIndex.value = index;
}
function  addbkColor(index) {
  if (currentIndex.value == index) {
    return {active: bkcolor.value}
  }
}
function clickItem2(index) {
  currentIndex2.value = index;
}
function  addbkColor2(index) {
  if (currentIndex2.value == index) {
    return {active: bkcolor.value}
  }
}
function playMV(mvid){
  // console.log(mvid)
  axios.post(baseURL+"/mv/url?id=" + mvid).then((res) => { //获取MV地址
    mvurl.value = res.data.data.url;
  }).then(()=>{
    mvstore.$patch((state)=>{
      state.mvid=mvid;
    })
    router.push({name:'songsMV',params:{mvurl:mvurl.value}})
  })
}

function clickItem3(a){
  currentIndex3.value=a;
  // let aLi = document.getElementById("p1").childNodes
  // aLi[a].style.color="#42b983";}
}
function  addbkColor3(a) {
  if (currentIndex3.value == a) {
    return {active2: bkcolor.value}
  }
}
</script>

<style scoped>
.box3{
  width: 100%;
  height: 450px;
  overflow-y:scroll;
  overflow-x:hidden;
}
.type1{
  text-align: center;
  width: 100px;
  height: 30px;
  margin-right: 30px;
  border-radius:50px 50px 50px 50px;
}
.type2{
  text-align: center;
  width: 100px;
  height: 30px;
  margin-right: 30px;
  border-radius:50px 50px 50px 50px;
}

.MVBox{
  display: flex;
  flex-wrap:wrap;
}

.MVBox .MVList{
  width: 250px;
  height: 200px;
  margin-right: 20px;
  margin-bottom: 40px;
  text-align: center;
  position: relative;
  transition:All 0.4s ease-in-out;
}
.MVBox .MVList:hover{
  transform:translate(0,-10px);
}

.MVBox .MVList .img{
  width: 250px;
  height: 150px;
}
.MVBox .MVList .i{
  color: white;
  position: absolute;
  left: 90px;
  top:30px;
  opacity:0;
  font-size: 80px;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 2s;
}
.MVBox .MVList .i:hover{
  opacity: 1;
}
.point:hover{
  background-color: #42b983;
  cursor: pointer;
}

.active{
  background-color: #42b983;
}

.active2{
  color: #42b983;
}
</style>